<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swp-page swiper-slide" v-for="list in lists" v-bind:key="list.id">
        <a class="js-no-follow" :href="list.clickUrl">
          <img class="goods-main-photo fadeIn" :src="list.img">
        </a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<style lang="">
  .swiper-slide img{
    height: 100%;
    width: 100%;
  }
</style>

<script>
  import Swiper from 'swiper'
  import 'swiper/css/swiper.css'

  export default {
    name: 'swipe',
    props: {
      lists: {
        type: Array,
        required: true
      },
      name: {}
    },
    created () {
      
    },
    mounted() {
      new Swiper('.swiper-container', {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
      })
    },
  }
</script>
